<template>
    <div class="znlogin">
        <div class="topImg">
            <img src="@/assets/imgs/znlogo.png" alt="">
        </div>
        <div class="logoTitle">
            <h2>登录系统</h2>
        </div>
        <div class="sysName">
            <h3>温湿度监测终端</h3>
        </div>
        <div class="loginsec">
            <div class="login-container">
                <div class="editRow">
                    <i class="fa fa-user"></i>
                    <input v-model="pageState.userCode" type="text" placeholder="请输入用户名">
                </div>
                <div class="editRow">
                    <i class="fa fa-lock"></i>
                    <input v-model="pwd" type="password" placeholder="请输入密码">
                </div>
                <div class="editRow">
                    <button @click="checkLogin">登录系统</button>
                </div>
            </div>
        </div>
        
        <div class="copyright">
            <el-divider></el-divider>
            <div class="company">
                copy right @ 综能电力科技有限公司
            </div>
            
        </div>
    </div>
</template>

<script> 
    import {admin} from '../../admin';
    import {moApp} from './moapp.js';
    export default {
        mounted(){
            var me = this;
            try {
                me.$nextTick().then(_=>{
                    return me.init();
                }).then(_=>{
                    me.refresh();
                })
            } catch (error) {
                console.log(error)
            }
        },
        data(){
            return{ 
                pageState:{
                    userCode:"" 
                },
                pwd:"",
                pageStateKey : "zn_admin_mo_login",
                dicts:{ 
                }
            }

        },
        methods:{
            init(){
                var me = this;
                return new Promise((su,fa)=>{
                    try {
                        me.pageState = admin.api.getSessionObj( me.pageStateKey , me.pageState); 
                        su();
                    } catch (error) {
                        console.log(error);
                        su();
                    }
                })
            },
            refresh(){
                var me = this;
                try {
                    admin.api.setSessionObj( me.pageStateKey , me.pageState); 
                    
                } catch (error) {
                    console.log(error)
                }
            },
            checkLogin(){
                var me = this;
                try {
                    admin.api.setSessionObj( me.pageStateKey , me.pageState);  
                    moApp.checkLogin(  me.pageState.userCode , me.pwd ).then(_res=>{
                        if( _res && _res.status>0){
                            me.$message.success('登录成功！');
                            window.setTimeout(()=>{
                                me.$router.push({
                                    path:"index/main"
                                })
                            }, 2000);
                        }
                        else{
                            me.pwd = "";
                            me.$message.error(_res.error)
                        }
                    })
                } catch (error) {
                    console.log(error)
                }
            },

        }
        
    }
</script>

<style lang="less" scoped>
    .znlogin{
        .topImg{
            padding: 30px;
            img{height: 60px;}
        }
        .logoTitle{
            font-weight: bold;
            font-size: 1.5rem;
            color: #333;
            margin-bottom: 0.5rem;
        }
        .sysName{
            color: #696867;
            margin-bottom: 1rem;
        }
        .loginsec{
            padding: 0 30px;
            .login-container{
                padding: 20px;
                background-color: #fff;
                box-shadow: 0 0 2px 0 #dcdfe6;
                border-radius: 10px;

                .editRow{
                    margin-bottom: 15px;
                    position: relative;
                    input{
                        width: 100%; 
                        box-sizing: border-box;                   
                        border:1px solid #a9a9a9;
                        border-radius: 7px;
                        padding: 15px;
                        padding-left: 40px;
                        font-size: 1.2em;
                        &:focus {
                        outline: none;
                        border-color: #1E88E5;
                        }
                    }
                    i{
                        font-size: 1.2em;
                        font-weight: bold;
                        position: absolute;
                        left: 15px;
                        top: 17px;
                    }
                    button{
                            width: 100%;
                            padding: 0.8rem;
                            background: linear-gradient(90deg, #1E88E5, #42A5F5);
                            color: white;
                            border: none;
                            border-radius: 8px;
                            cursor: pointer;
                            transition: all 0.2s;
                    }
                }
            }
        }

        .copyright{
            padding: 0 30px;
            color: #878b94;
        }
    }
</style>